<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        #tab{
            width: 500px;
            height: 200px;
            /*background: -webkit-linear-gradient(top,#007fff,#84bff9);*/
            margin-bottom: 100px;
        }
        #aTime{
            color: #fff;
            /*text-align: center;*/
            /*line-height: 200px;*/
            float: left;
        }
        #Tradion{
            width: 200px;
            height: 200px;
            border: 4px solid gray;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
        }
        #hours{
            width: 60px;
            height: 2px;
            background:orange;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -4px;
            margin-top: -15px;
            transform-origin: bottom center;
        }
        #minutes{
            width: 76px;
            height: 2px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: 31px;
            margin-left:-20px;
            transform-origin: bottom center;
            transform:rotate(0deg);
        }
        #seconds{
            width: 90px;
            height: 1px;
            background: black;
            /*margin:100px 100px;*/
            /*transform-origin: 6px 0px;*/
            /*transform:rotate(0deg);*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1px;
            margin-top: -55px;
            transform-origin:1px 135px;
        }
        .tran{
            transform: rotate(-90deg);/*这里测试了一下旋转角*/
        }
        #dian{
            width:4px;
            height: 4px;
            border-radius: 50%;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        #aDate,#week{
            color: #fff;
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div id="tab">
    <div id="Tradion">
        <div id="hours" class="tran"></div>
        <div id="minutes" class="tran"></div>
        <div id="seconds" class="tran"></div>
        <div id="dian"></div>

    </div>
    <h1 id="aTime"></h1>
    <h3 id="aDate"></h3>
    <h2 id="week"></h2>
</div>


<script type="text/javascript">
    window.onload=function(){
        function addzero(num){
            if(num>=10)
            {
                return ""+num;
            }
            else
            {
                return "0"+num;
            }
        }

        function times(){
            var date=new Date();
            // var aTime=document.getElementById('aTime');
            // var str= addzero(date.getHours())+":"+ addzero(date.getMinutes())+":"+ addzero(date.getSeconds());
            // aTime.innerHTML=str;
        }
        setInterval(times,1000);
        times();
        function Ttranform(){
            var date=new Date();
            var hours=document.getElementById('hours');
            var minutes=document.getElementById('minutes');
            var seconds=document.getElementById('seconds');
            var num=date.getHours();
            var num2=date.getMinutes();
            var num3=date.getSeconds();
            hours.style.transform="rotate("+(num*30-90)+"deg)";
            minutes.style.transform="rotate("+(num2*6-90)+"deg)";
            seconds.style.transform="rotate("+(num3*6-90)+"deg)";

        }
        setInterval(Ttranform,1000);
        Ttranform();
    }
</script>
</body>
</html>